<template>
	<div style="width: 100wh;height: 40vh;margin-top: 10px;">
		<van-row>
			<van-col span="24" style="padding: 10px;font-weight: 600;">为您推存</van-col>
		</van-row>
		<van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
			<van-row style="margin-left: 6px;display: flex;flex-wrap: wrap;">
				<van-col span="10" style="height: 18.75rem;margin-left: 20px;margin-top: 20px;"
					v-for="(item,index) in depositLists" @click="particulars(item.goods_id)">
					<van-image width="100%" height="65%" :radius="5" :lazy-load="true" :src="http+item.original_img" />
					<van-row>
						<van-col span="24">
							<h3
								style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 6vh;text-align: center;">
								{{item.goods_name}}
							</h3>
						</van-col>
						<van-col span="24">
							<h2 style="color: #FF0000;">￥{{item.market_price}}</h2>
						</van-col>
						<van-col span="24" style="font-size: 1rem;color: #656;">
							{{item.sales_sum}}万人
						</van-col>
					</van-row>
				</van-col>
			</van-row>
			<!-- 下拉 -->
		</van-list>
		<van-row>
			<van-col span="24" style="height: 10vh;"></van-col>
		</van-row>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		Notify
	} from 'vant';
	export default {
		components: {
			[Notify.Component.name]: Notify.Component,
		},
		data() {
			return {
				http: 'https://img.9lele.com',
				depositLists: '',
				loading: false,
				finished: false,
				id: 2,
				li: 2
			}
		},
		computed: {
			...mapGetters([
				'depositList'
			])
		},
		created() {
			this.list()
		},
		methods: {
			list() {
				this.$nextTick(function() {
					this.$store.dispatch("user/vuexdeposit", 1)
						.then(e => {
							console.log(e)
							this.depositLists = e.data.data
						})
				})
			},
			particulars(ids) {
				console.log(ids)
				this.$router.push({
					path: '/particulars',
					query: {
						id: ids
					}
				})
			},
			onLoad() {
				let li = this.id++;
				console.log(li, 'ppppp')
				if (this.loading) {
					this.loading = true;
				}
				this.$nextTick(function() {
					this.$store.dispatch("user/vuexdeposit", li)
						.then(e => {
							console.log(e.data.data, '00000')
							e.data.data.forEach((v) => {
								this.depositLists.push(v);
								this.loading = false;
							})
						})
				})
				if (li >= 19) {
					this.finished = true;
					Notify('没有了呢!');
				}
			}
		}
	}
</script>

<style>
	.spanStyle {
		display: inline-block;
		white-space: normal;
		width: 100px;
		overflow: hidden;
		/*超出的文本隐藏*/
		text-overflow: ellipsis;
		/* 溢出用省略号*/

	}
</style>
